<template>
  <div>
    <navBar :config="navBarConfig" />
    <div class="list content_management">
      <div class="select_management">
        <div class="title">时间范围：</div>
        <div class="content">
          <el-date-picker v-model="queryParams.searchTimes" type="daterange" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
            value-format="yyyy-MM-dd" @change="getList()">
          </el-date-picker>
        </div>
        <div class="title">项目类型：</div>
        <div class="content">
          <el-select v-model="queryParams.taskStatus" placeholder="请选择任务状态" clearable @change="getList()">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="title">关键字查询：</div>
        <div class="content">
          <el-input v-model="queryParams.keyword" placeholder="请输入搜索内容" @input="querytaskName" clearable></el-input>
        </div>
        <div class="title">
          <el-button type="primary" icon="el-icon-plus" @click="itemVisible = true">新增</el-button>
        </div>
        <!-- <div class="title">
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </div> -->
      </div>
      <div class="table_management">
        <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="getRowClass"
          :max-height="maxHeight" v-loading="loading" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="项目编号" prop="taskDate" align="center">
          </el-table-column>
          <el-table-column label="项目名称" prop="taskName" align="center">
          </el-table-column>
          <el-table-column label="合同编号" prop="taskStatus" align="center">
          </el-table-column>
          <el-table-column label="开题单号" prop="pageCode" align="center">
          </el-table-column>
          <el-table-column label="所属类别" prop="type" align="center">
          </el-table-column>
          <el-table-column label="创建日期" prop="date" align="center">
          </el-table-column>
          <el-table-column label="状态" prop="status" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="120px">
            <template slot-scope="scope">

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="createDate">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize"
            layout="->,total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="新增项目" :visible.sync="itemVisible" width="600px" >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="itemVisible = false">确 定</el-button>
        <el-button @click="itemVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { throttle } from '@/utils';
export default {
  name: 'Analysis',
  data() {
    return {
      navBarConfig: {
        leftTool: true,
        rightTool: false,
      },
      itemVisible:false,
      selectList: [],
      loading: false,
      maxHeight: '600px',
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        searchTimes: null,
        keyword: null,
        taskStatus: null,
      },
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      //任务状态
      statusList: [
        {
          label: '项目编号',
          value: 0
        },
        {
          label: '项目名称',
          value: 1
        },
        {
          label: '合同编号',
          value: 2
        },
        {
          label: '开题单号',
          value: 3
        },
        {
          label: '所属类别',
          value: 4
        },
        {
          label: '状态',
          value: 5
        },
      ],
    }
  },
  created() {
    this.getList()
    setTimeout(() => {

      const event = document.createEvent('HTMLEvents');

      event.initEvent('resize', true, true);

      event.eventType = 'message'
      window.dispatchEvent(event);

    }, 100)
    window.addEventListener('resize', this.windowResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResize)
  },
  methods: {
    getList() {
    },
    //筛选
    querytaskName: throttle(function () {
      this.getList(this.queryParams)
    }, 500),
    //修改页数
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    //修改页码
    handleCurrentChange(val) {
      this.queryParams.pageNo = val
      this.getList()
    },
    handleSelectionChange(value) {
      this.selectList = value
    },
    windowResize() {
      let val = document.body.clientHeight
      this.maxHeight = (val - 350) + 'px'
    },
    //table 自定义表头
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#eee;font-weight: 400;color:#666;text-align:center";
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.list {
  box-shadow: 1px 2px 5px 2px #ccc;
  border-radius: 6px;
  padding: 0 20px;
  height: calc(100vh - 160px);
  overflow-y: auto;

}

.content_management {
  padding: 25px;

  .table_management {
    border-radius: 6px;

    .createDate {
      padding-top: 15px;
    }
  }

  .select_management {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 50px;
    margin-bottom: 15px;

    ::v-deep .el-input__inner {
      height: 35px;
      line-height: 35px;
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
    }

  }
}
</style>

